import 'package:flutter/material.dart';

/// 响应式布局组件
class ResponsiveLayout extends StatelessWidget {
  final Widget mobile;
  final Widget? tablet;
  final Widget desktop;
  final double breakpointTablet;
  final double breakpointDesktop;

  const ResponsiveLayout({
    super.key,
    required this.mobile,
    this.tablet,
    required this.desktop,
    this.breakpointTablet = 600,
    this.breakpointDesktop = 1200,
  });

  /// 检查当前是否为移动设备布局
  static bool isMobile(BuildContext context) {
    return MediaQuery.of(context).size.width < 600;
  }

  /// 检查当前是否为平板设备布局
  static bool isTablet(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return width >= 600 && width < 1200;
  }

  /// 检查当前是否为桌面设备布局
  static bool isDesktop(BuildContext context) {
    return MediaQuery.of(context).size.width >= 1200;
  }

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;

    if (width >= breakpointDesktop) {
      return desktop;
    } else if (width >= breakpointTablet && tablet != null) {
      return tablet!;
    } else {
      return mobile;
    }
  }
}

/// 响应式网格组件
class ResponsiveGrid extends StatelessWidget {
  final List<Widget> children;
  final double spacing;
  final double runSpacing;
  final CrossAxisAlignment crossAxisAlignment;
  final MainAxisAlignment mainAxisAlignment;

  const ResponsiveGrid({
    super.key,
    required this.children,
    this.spacing = 16.0,
    this.runSpacing = 16.0,
    this.crossAxisAlignment = CrossAxisAlignment.start,
    this.mainAxisAlignment = MainAxisAlignment.start,
  });

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    int crossAxisCount;

    if (width >= 1200) {
      // 大屏幕桌面：4列
      crossAxisCount = 4;
    } else if (width >= 900) {
      // 中等屏幕桌面：3列
      crossAxisCount = 3;
    } else if (width >= 600) {
      // 平板：2列
      crossAxisCount = 2;
    } else {
      // 移动设备：1列
      crossAxisCount = 1;
    }

    if (crossAxisCount == 1) {
      // 移动设备使用列表布局
      return ListView.separated(
        separatorBuilder: (context, index) => SizedBox(height: spacing),
        itemCount: children.length,
        itemBuilder: (context, index) => children[index],
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
      );
    } else {
      // 其他设备使用网格布局
      return GridView.count(
        crossAxisCount: crossAxisCount,
        crossAxisSpacing: spacing,
        mainAxisSpacing: runSpacing,
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        children: children,
      );
    }
  }
}

/// 响应式卡片组件
class ResponsiveCard extends StatelessWidget {
  final Widget child;
  final EdgeInsets? margin;
  final EdgeInsets? padding;
  final Color? color;
  final double? elevation;
  final VoidCallback? onTap;
  final bool withShadow;

  const ResponsiveCard({
    super.key,
    required this.child,
    this.margin,
    this.padding,
    this.color,
    this.elevation,
    this.onTap,
    this.withShadow = true,
  });

  @override
  Widget build(BuildContext context) {
    final isMobile = ResponsiveLayout.isMobile(context);

    final defaultMargin =
        isMobile ? const EdgeInsets.all(8.0) : const EdgeInsets.all(16.0);

    final defaultPadding =
        isMobile ? const EdgeInsets.all(12.0) : const EdgeInsets.all(24.0);

    final defaultElevation = isMobile ? 2.0 : 4.0;

    return Card(
      margin: margin ?? defaultMargin,
      color: color,
      elevation: withShadow ? (elevation ?? defaultElevation) : 0,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(isMobile ? 12.0 : 16.0),
      ),
      child: InkWell(
        onTap: onTap,
        borderRadius: BorderRadius.circular(isMobile ? 12.0 : 16.0),
        child: Padding(
          padding: padding ?? defaultPadding,
          child: child,
        ),
      ),
    );
  }
}
